import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { observer} from 'mobx-react';
import { Icon } from 'weaver-mobile';
import { MapPage } from "weaver-mobile-page";
import classnames from 'classnames';

@withRouter
@observer
export default class MapView extends Component {
    amapEvents = {
        created: instance => {
            const {store: {mapUtil}} = this.props;
            mapUtil.mapInstance = instance;
            this.relocation();
        },
        zoomchange: () => this.onZoomChangeHandle()
    };

    initEndCallback = () => {
        const {store: {mapUtil}} = this.props;
        mapUtil.mapInited = true;
        this.relocation();
    }

    relocation = () => {
        const {store: {relocation}} = this.props;
        relocation(this.draw());
    }

    draw = () => {
        const {store} = this.props;
        const {mapUtil} = store;
        const {isAmap, isGoogleMap, clearMapData, addCircle, createIcon, addMarker, setFitView} = mapUtil;
        //清理地图数据
        clearMapData();

        //自适应数据
        const boundDatas = [];

        const {hasLocationInfo, locationInfo, locationAndWifiInfo, distance} = store;
        const {locationInfo: locationSetting} = locationAndWifiInfo || {};
        const {locationcheck, locations} = locationSetting || {};
        const {shortestPosition} = distance || {};
        locations && locationcheck && locations.map(location => {
            //添加考勤范围circle
            addCircle(location);
            //添加考勤地点marker
            const marker = addMarker(location, createIcon(window.companyIconUrl), new window.AMap.Pixel(-17, -34));
            if(shortestPosition && location.id == shortestPosition.id){//添加距离最近的考勤点到自适应数据中
                isAmap && boundDatas.push(marker);
                isGoogleMap && boundDatas.push(location);
            }
        });
        if(hasLocationInfo){//添加实时位置marker
            const marker = addMarker({...locationInfo, id: -1000}, createIcon(window.selfIconUrl));
            isAmap && boundDatas.push(marker);
            isGoogleMap && boundDatas.push(locationInfo);
        }

        //地图元素自适应
        setFitView(boundDatas);
    }

    onZoomChangeHandle = () => {
        const {store: {mapUtil}} = this.props;
        const {isAmap, isGoogleMap, mapInstance, googleMapStore, circles} = mapUtil;
        if(isAmap){
            const zoom = mapInstance.getZoom();
            let overlays = mapInstance.getAllOverlays("circle");
            overlays.map(overlay => {
                zoom <= 11 && overlay.hide();
                zoom > 11 && overlay.show();
            });
        }else if(isGoogleMap){
            circles.map(c => c.setVisible(googleMapStore.map.zoom > 11));
        }
    }

    render(){
        const {store} = this.props;
        const {locationInfo, mapUtil} = store;
        const {mapStore, isAmap, isGoogleMap, onMapTypeChangeHandle} = mapUtil;
        const mapProps = {};
        const relocationClassName = classnames({
            'relocate': true,
            'relocate-google': !isAmap
        })
        if(isAmap){
            Object.assign(mapProps, {
                plugins: [],
                events: this.amapEvents,
                children: (
                    <div className={relocationClassName} onClick={this.relocation}>
                        <Icon className='icon' type='positioning' color='#999' size='ms'/>
                    </div>
                )
            })
        }else if(isGoogleMap){
            Object.assign(mapProps, {
                initEndCallback: this.initEndCallback,
                center: [locationInfo.longitude, locationInfo.latitude],
                needInitMarker: false,
                intiGoogleMapParams: {
                    fullscreenControl: false
                }
            })
        }
        
        return (
            <div className='map'>
                <MapPage store={mapStore} showIntroduction={false} {...mapProps} onMapSwitch={type => onMapTypeChangeHandle(type)} />
                {
                    isGoogleMap && 
                    <div className={relocationClassName} onClick={this.relocation}>
                        <Icon className='icon' type='positioning' color='#999' size='ms'/>
                    </div>
                }
            </div>
        )
    }
}